/*
  1. 组合选择器
*/
.header, p, label {
    color: darkgray;
}

.s1, .s2 {
    font-size: 30px;
    font-weight: bolder; /*字体比重：加粗*/
}

p.p3 {
    color: red;
}

p.p4 {
    /*<p class="p4">*/
    color: blue;
}

span#s1 {
    /*找出 <span id="s1" >*/

}

/*属性选择器:一般会作用在input 标签中*/
input[type="password"] {
    width: 500px;
}

/*==========================后代选择器=====================================*/
.p1 .str1 {
    color: red;
}

/*
    第一个子元素：    li:first-child
    最后一个子元素：  li:last-child

    第n个子元素:      li:nth-child(n)
    倒数第n个子元素： li:nth-last-child(n)

*/
.d1 ul li:first-child {
    font-size: 30px;
}

.d1 ul li:last-child {
    font-size: 30px;
}

.d1 ul li:nth-child(3) {
    font-size: 25px;
}

.d1 ul li:nth-last-child(2) {
    font-size: 25px;
}

/*
 第一层直接子元素
    父元素>子元素

*/
.p1 > span {
    color: red;
}

/*
  下一个兄弟元素

*/
.p1 .sp1 + span {
    font-size: 30px;
}

/*======================伪元素==============================*/
.piao-btn {
    width: 200px;
    height: 60px;
    border: 3px solid crimson; /*边框*/
    color: black; /*文字颜色*/
    line-height: 60px; /*文本 垂直剧中，值与height一样*/

}

/*=伪元素==*/
.piao-btn:after {
    display: block; /*块级元素*/
    width: 40px;
    height: 40px;
    background-color: crimson;
    content: '特价';
    text-align: center; /*文本水平剧中*/
    line-height: 40px; /*文本 垂直剧中，值与height一样*/
    font-size: 8px;
    border-radius: 20px; /*圆角*/
    position: relative;
    left: 160px;
    top: -75px;
    color: white;
}

.btn1 {
    width: 200px;
    height: 60px;
    background-color: orange;
    color: white;
    border: none;
}

.btn2 {
    border-radius: 5px;
}


